import Vue from 'vue';

// 导入token的操作方法
import {
    saveToken,
    getToken,
    removeToken
} from '@/utils/auth.js';
// 导入接口
import {
    userInfoAPI
} from '@/api/index.js';
// 导入router
import router from '@/router/index.js';
// 导入toast
import {
    Toast
} from 'vant';
// 导入vuex
import Vuex from 'vuex';
Vue.use(Vuex)

// 实例化vuex对象，也称为store
export const store = new Vuex.Store({
    // 存放数据的地方，vuex的数据所有组件都可以访问
    state: {
        // 转用于保存token数据
        // 如果本地存储有值就拿本地存储的值
        // 如果本地存储没有值就给空对象
        tokenObj: getToken() || {},
        // 声明userInfo来保存用户信息
        userInfo: {}
    },
    // 存放方法的地方
    // 本项目里主要用于度token的设置
    mutations: {
        setToken(state, tokenObj) {
            state.tokenObj = tokenObj
            // 把得到的token也保存到本地存储中
            saveToken(tokenObj)
        },
        // 用于修改userInfo的方法
        setUserInfo(state, info) {
            state.userInfo = info
        },
        // 编写一些专用于退出登录的方法
        logout(state) {
            // 删除vuex里的token
            state.tokenObj = {}
            // 删除本地存储的token
            removeToken()
            // 删除vuex里的用户信息
            state.userInfo = {}
            // 弹出退出成功的提示
            Toast.success('退出成功')
            router.push('/login')
        }
    },
    actions: {
        // 封装获得用户信息的代码
        async reqUserInfo(context) {
            // 如果vuex里没有数据才发起请求
            if (!context.state.userInfo.name) {
                // 发起请求获取用户资料
                let res = await userInfoAPI()
                context.commit('setUserInfo', res.data.data)
            }
        }
    }
})